<%@ page import="java.sql.*" %>
<%@ page import="com.xxx.entity.User" %>
<%@ page import="com.xxx.DAO.booksDao" %>
<%@ page import="com.xxx.util.pageUtil" %>
<%@ page import="java.util.List" %>
<%@ page import="com.xxx.entity.Book" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="com.xxx.util.JDBCUtil" %>
<%@ page import="com.xxx.DAO.user_bookDao" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%--通过taglib标签引入所需的标签库--%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图书资源页面</title>
		<%--    指定jquery库文件的位置--%>
<%--		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>--%>
		<script type="text/javascript">
			function borrow(id){
				//1.创建异步对象
				var xmlHttp=new XMLHttpRequest();
				//2.绑定事件
				xmlHttp.onreadystatechange=function (){
					if (xmlHttp.readyState==4&&xmlHttp.status==200){
						var data=xmlHttp.responseText;
						//把json字符串转换为json字符串
						var jsonobj=eval("("+data+")");
						//更新dom对象
						document.getElementById("sum"+id).innerHTML=jsonobj.sum;
						document.getElementById("btn"+id).innerHTML=jsonobj.string;
						// alert(data)
					}
				}

				//3.初始异步对象
				xmlHttp.open("get","ajaxBorrow?id="+id,true);

				//4.发送请求
				xmlHttp.send();
			}
		</script>
		<link rel="stylesheet" type="text/css" href="css/catalog1.css"/>
		<style>
			#add,#modify{
				position: absolute;
				z-index: 2;
				margin-left: 20%;
				background-color: lightgray;
				display: none;
			}
			#add .cancel,#modify .cancel{
				font-weight: bold;
				border: 2px solid black;
				padding:5px;
				float: right;
				margin: 5px 5px 0 0;
			}
			#add form,#modify  form{
				width: 400px;
				height: 350px;
				padding: 50px;
				text-align: center;
				margin: 0px auto;
				margin-top: 5%;
				box-shadow: 20px 20px 5px #888888;
			}
			#add form input,#modify form input{
				padding: 10px;
				width: 300px;
				height: 30px;
				margin-bottom: 20px;
				display: inline-block;
				font-size: 30px;
				font-family: 楷体;
				border-radius: 5px;
			}
			#add form button,#modify form button{
				margin-top: 20px;
				font-size: 25px;
				width: 100px;
				padding: 5px;
				background-color: dodgerblue;
				color: white;
				font-family: 宋体;
				border-radius: 10px;
			}
		</style>
	</head>
	<body id="catalog_body">		
		<div id="catalog">
			<div id="catalog_header">
				<div id="catalog_nav">
					您的位置: <a href="Home.jsp">首页</a> > <a href="catalog.jsp">资源</a>
				</div>
				<div id="catalog_search">
					<form action="showTable" method="post">
						<input type="text" name="search" id="search" value="" />
						<select name="bType" id="select">
							<option value="bName" selected="selected">书名</option>
							<option value="bAut">作者</option>
						</select>
						<button type="submit" style="float:left;">搜索</button>
					</form>
				</div>				
			</div>
			<div id="content">
				<div id="catalog_left">
					<div id="classfiy">
						图书分类
					</div>
					<ul>
						<li><a href="showTable?type=1">文字</a></li>
						<li><a href="showTable?type=2">政治、法律</a></li>
						<li><a href="#">经济</a></li>
						<li><a href="#">历史、地理</a></li>
						<li><a href="#">文化、科学、教育、体育</a></li>
						<li><a href="#">哲学、宗教</a></li>
						<li><a href="#">社会科学总论</a></li>
						<li><a href="#">语言、文字</a></li>
						<li><a href="#">艺术</a></li>
						<li><a href="#">工业技术</a></li>
						<li><a href="#">马克思主义、列宁主义、毛泽东思想、邓小平理论</a></li>
						<li><a href="#">地球科学</a></li>
						<li><a href="#">环境科学、安全科学</a></li>
						<li><a href="#">医药、卫生</a></li>
						<li><a href="#">军事</a></li>
						<li><a href="#">农业科学</a></li>
						<li><a href="#">综合性科学</a></li>
						<li><a href="#">数理科学和化学</a></li>
						<li><a href="#">自然科学总论</a></li>
						<li><a href="#">生物科学</a></li>
						<li><a href="#">交通运输</a></li>
						<li><a href="#">航天、航空</a></li>
					</ul>
				</div>	
				<div id="catalog_right">
				<%JDBCUtil util=new JDBCUtil();%>
				<table width="650px" border="0" align="center" cellpadding="4" cellspacing="1" id="table1">
				 <tbody>
					<tr>
					    <th>书名</th>
						<th>作者</th>
						<th>出版社</th>
						<th>剩余数量</th>
						<th>操作</th>
<%--						<th>图片</th>--%>
					</tr>
                    <%--连接数据库--%>
                    <c:forEach var="book" items="${list}">
						<tr>
							<td><img src="${book.path}" /><br><a href="showBook?bName=${book.bName}">${book.bName}</a></td>
						    <td>${book.bAut}</td>
						    <td>${book.bPub}</td>
						    <td id="sum${book.id}">${book.bSum}</td>
							<td><div id="footer">
							<c:if test="${book.result==1}">已借
							</c:if>
							<c:if test="${book.result==0}">
<%--						<a href="jieshu2?id=${book.id}">借书</a>--%>
<%--							<a href="#" id="${book.id}" onclick="borrow(${book.id})">借书</a>--%>
								<c:if test="${book.bSum>0}">
								<button id="btn${book.id}" onclick="borrow(${book.id})">借书</button>
								</c:if>
								<c:if test="${book.bSum<=0}">
									<button>已借完</button>
								</c:if>

							</c:if>
							</div>
							</td>
							</td>
						</tr>
					</c:forEach>
					<tr align="center">
						<th colspan="8">
							当前页数${iPage}/${iPageCnt}
							<c:if test="${iPage>1}">
							<a href="showTable?page=1">第一页</a>
							<a href="showTable?page=${iPage-1}">上一页</a>
							</c:if>
							<c:if test="${iPage<requestScope.iPageCnt}">
							<a href="showTable?page=${iPage+1}">下一页</a>
							<a href="showTable?page=${iPageCnt}">页尾</a>
							</c:if>
						</th>
					</tr>
				 </tbody>
				</table>
<%--					<img src="img/person1.jpg"/>--%>
				</div>

			</div>
		</div>
	</body>
</html>
